<template>
  <div class="userManage">
    <search-form
      ref="header"
      :search-data="ruleForm"
      :search-form="searchData"
      :search-handle="searchHandle"
    ></search-form>
    <base-table
      :tableData="tableData"
      :tableColumn="tableTitle"
      :Pagination="page"
      :tableOption="tableOption"
      :height="tableHeight"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @action="handleButton"
    ></base-table>

    <!-- 添加或编辑弹框 -->
    <addOrEditDialog
      ref="userDialog"
      v-if="dialogObj.show"
      :Visible="dialogObj.show"
      :type="dialogObj.type"
      :dialogRow="dialogObj.dialogRow"
      @close="dialogObj.show = false"
      @refresh="refreshTable"
    ></addOrEditDialog>

    <!-- 权限弹框 -->
    <permisstionDialog
      v-if="permissionDialog.show"
      :dialogShow="permissionDialog.show"
      :userId="permissionDialog.userId"
      @close="permissionDialog.show = false"
    ></permisstionDialog>
    <!-- 热源权限弹框 -->
    <heatSourcePermiss
      v-if="heatDialogObj.show"
      :dialogShow="heatDialogObj.show"
      :userId="heatDialogObj.userId"
      @close="heatDialogObj.show = false"
    >
    </heatSourcePermiss>
  </div>
</template>
<script>
import baseTable from "@/components/Table/index.vue";
import searchForm from "@/components/SearchForm/index.vue";
import {
  addOrEditDialog,
  heatSourcePermiss,
  permisstionDialog,
} from "./component";
import { delUser, getUserList } from "@/api/user.js";
import { reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import heightMinxin from "@/utils/tableHeight.mixin";
export default {
  name: "user",
  mixins: [heightMinxin],
  components: {
    searchForm,
    baseTable,
    heatSourcePermiss,
    addOrEditDialog,
    permisstionDialog,
  },
  setup() {
    const state = reactive({
      ruleForm: {
        namePhEm: "",
      },
      searchData: [
        {
          type: "Input",
          prop: "namePhEm",
          placeholder: "输入名称/手机号进行搜索",
        },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: () => {
            getListData();
          },
        },
        {
          label: "添加",
          handle: () => {
            handleAdd("add");
          },
        },
      ],
      tableData: [],
      tableTitle: [
        { prop: "name", label: "姓名" },
        {
          prop: "sex",
          label: "性别",
          render: (h) => {
            return h.sex == 0 ? "男" : "女";
          },
        },
        { prop: "phone", label: "电话" },
        { prop: "email", label: "邮箱" },
        {
          prop: "state",
          label: "状态",
          render: (h) => {
            if (h.state == 0) {
              return "在职";
            } else if (h.state == 1) {
              return "离职";
            } else {
              return "锁定";
            }
          },
        },
      ],
      tableOption: {
        label: "操作",
        buttons: [
          { name: "编辑", methods: "edit" },
          {
            name: "模块权限",
            methods: "permisstion",
          },
          { name: "热源权限", methods: "heatSource" },
          { name: "删除", methods: "delete", style: { color: "red" } },
        ],
      },
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      dialogObj: { show: false, type: "add", dialogRow: {} },
      permissionDialog: { show: false, userId: "" },
      heatDialogObj: { show: false, userId: "" },
    });

    onMounted(() => {
      getListData();
    });
    /**
     * 查询
     */
    const getListData = async () => {
      let params = Object.assign(state.ruleForm, {
        pageNo: state.page.pageNo,
        pageSize: state.page.pageSize,
      });
      const { data: res } = await getUserList(params);
      if (res.success) {
        const { records, total } = res.data;
        state.tableData = records;
        state.page.total = total;
      }
    };
    const handleCurrentChange = (val) => {
      state.page.pageNo = val;
      getListData();
    };
    const handleSizeChange = (val) => {
      state.page.pageSize = val;
      getListData();
    };
    /***
     * 添加
     */
    const handleAdd = (type) => {
      state.dialogObj.show = true;
      state.dialogObj.type = type;
    };
    /**
     * 编辑和删除
     */
    const handleButton = ({ row, methods, index }) => {
      if (methods == "edit") {
        state.dialogObj.dialogRow = { ...row };
        handleAdd(methods);
      } else if (methods == "permisstion") {
        state.permissionDialog.show = true;
        state.permissionDialog.userId = row.id;
      } else if (methods == "heatSource") {
        state.heatDialogObj.show = true;
        state.heatDialogObj.userId = row.id;
      } else {
        handleDelete(row, index);
      }
    };

    const handleDelete = (row, index) => {
      ElMessageBox.confirm(`确定删除该用户${row.name}?`, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          delUser({ id: row.id }).then((res) => {
            if (res.data.success) {
              state.tableData.splice(index, 1);
              ElMessage.success(res.data.msg);
            }
          });
        })
        .catch(() => {});
    };

    const refreshTable = async () => {
      await getListData();
      state.dialogObj.show = false;
    };
    return {
      ...toRefs(state),
      handleButton,
      refreshTable,
      handleCurrentChange,
      handleSizeChange,
    };
  },
};
</script>
